import React, {Component} from 'react'
import {CheckCircleOutlined, DoubleRightOutlined} from '@ant-design/icons'
import '../../static/scss/common/dragValidate.scss'

class DragValidate extends Component {
    state = {
        isTouch: false,
        downX: null,
        left: 0,
        status: false
    }

    componentDidMount() {
        this.slider = document.querySelector(".drag_operate_btn");
        this.slider.onmousedown = this.downHandle
        this.slider.ontouchstart = this.downHandle;
        window.addEventListener('resize', this.witchResize)
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.witchResize)
    }

    witchResize = () => {
        this.setState({left: 0, status: false, downX: null, isTouch: false});
    }

    /*按下*/
    downHandle = e => {
        const {status} = this.state;
        e.preventDefault();
        if (!status) {
            let downX = e.clientX || e.touches[0].clientX;
            this.setState({isTouch: true, downX}, () => {
                document.onmousemove = this.moveHandle
                document.ontouchmove = this.moveHandle
                document.onmouseup = this.endHandle
                document.ontouchend = this.endHandle
            });
        }
    }

    /*抬起*/
    endHandle = e => {
        const {left, status, isTouch} = this.state;
        e.preventDefault();
        if (!status && isTouch) {
            let box = document.querySelector('.slide_validate_section');
            let btn = document.querySelector('.drag_btn');
            let boxWidth = box.clientWidth;
            let btnWidth = btn.clientWidth;
            if (left < (boxWidth - btnWidth)) {
                this.setState({left: 0}, () => {
                    this.props.success(false);
                });
            }
            this.setState({isTouch: false});
            document.onmousemove = null;
            document.onmouseup = null;
            document.ontouchmove = null;
            document.ontouchend = null;
        }
    }

    /*移动*/
    moveHandle = e => {
        const {isTouch, downX, status} = this.state;
        e.preventDefault();
        if (isTouch && !status) {
            let box = document.querySelector('.slide_validate_section');
            let btn = document.querySelector('.drag_btn');
            let moveX = (e.clientX || e.touches[0].clientX) - downX;
            let boxWidth = box.clientWidth;
            let btnWidth = btn.clientWidth;

            if (moveX >= 0 && moveX <= (boxWidth - btnWidth)) {
                this.setState({left: moveX});
            }

            if (moveX >= (boxWidth - btnWidth)) {
                this.setState({left: (boxWidth - btnWidth), status: true}, () => {
                    this.props.success(true);
                    this.slider.onmousedown = null;
                    document.onmousemove = null;
                    document.ontouchmove = null;
                });
            }
        }
    }

    render() {
        const {left, status} = this.state;
        return (
            <>
                <div className="slide_validate_section">
                    <p className="tip">拖动滑块验证</p>
                    <div className="move_bg" style={{width: left + 'px'}}>
                        {status ? <span><CheckCircleOutlined/>验证成功</span> : ''}
                    </div>
                    <div className="drag_btn drag_operate_btn" style={{left}}
                        // onTouchStart={this.downHandle}
                        // onTouchEnd={this.endHandle}
                        // onTouchMove={this.moveHandle}
                        //
                        // onMouseDown={this.downHandle}
                        // onMouseUp={this.endHandle}
                        // onMouseMove={this.moveHandle}
                    >
                        <DoubleRightOutlined/>
                    </div>
                </div>
            </>
        )
    }
}

export default DragValidate;